/*-------------------   外部导入   -------------------------------------------------------------------*/

import { Card, Button, Col, Row, Modal, Input, Space, Table, Tag, message, } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import { useState, useEffect } from "react";
import type { ColumnsType } from 'antd/es/table';
// 导入样式
import "../../../../assets/style/home.scss";
// 导入接口
import { getCarPayHistoryRecordRenewOwner } from "../../../../api/admin";
/*-------------------   外部导入   -------------------------------------------------------------------*/

function OwnerInformation(props: any) {
  /*-------------------   定义数据   -------------------------------------------------------------------*/
  const { Search } = Input;
  // 获取到的业主信息
  const [userInfo, setUserInfo] = useState()
  // 业主信息
  const [list, setList] = useState({
    memberId: "",
    age: "",
    userName: "",
    createTime: "2023-04-24 15:06:03",
    name: "",
    idCard: "",
    remark: "",
    sex: "",
    link: "",
  });
  // 模态框是否打开
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 表格数据
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  const columns: ColumnsType<DataType> = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '身份证',
      dataIndex: 'idCard',
      key: 'idCard',
    },
    {
      title: '联系方式',
      key: 'link',
      dataIndex: 'link',
    },
    {
      title: '创建员工',
      key: 'userName',
      dataIndex: 'userName',
    },
    {
      title: '操作',
      key: 'createTime',
      render: (_, record) => (
        <Button type="primary" onClick={() => { setlist(record) }} > 选择</Button >
      ),
    },
  ];
  /*-------------------   定义数据   -------------------------------------------------------------------*/


  /*-------------------   定义方法   -------------------------------------------------------------------*/
  // 获取车辆信息
  const getCarPay = () => {
    var obj = {
      page: 1,
      row: 10,
      communityId: 2023032658120002,
      name: "",
      roomName: "",
      ownerTypeCd: 1001
    };
    setIsModalOpen(true);
    getCarPayHistoryRecordRenewOwner(obj).then((res) => {
      console.log(res.data.owners);
      setUserInfo(res.data.owners)
    });
  };
  // 查询事件
  const onSearch = (e: any) => {
    console.log(e)
  }
  // 修改list
  const setlist = (arr: any) => {
    localStorage.setItem("ownerId", arr.ownerId);
    setList(arr)
    setIsModalOpen(false);

  }
  // 下一步
  const nextStep = () => {
    if (list.memberId != "") {
      props.setCurrent(2);
    } else {
      message.error("请选择业主")
    }
  }
  /*-------------------   定义方法   -------------------------------------------------------------------*/

  // 业主信息  组件
  return (
    <div className="OwnerInformation">
      <Card
        title="停车位信息"
        extra={
          <Button type="primary" onClick={getCarPay}>
            选择业主
          </Button>
        }
      >
        <Modal title="选择停车位" width={800} open={isModalOpen} okType="primary" okText="确定" cancelText="取消">
          <div className="top">
            <Search placeholder="请输入停车位编号" onSearch={(e) => { onSearch(e) }} enterButton />
          </div>
          <Table columns={columns} dataSource={userInfo} size="small" />;
        </Modal>
        <Row gutter={24}>
          <Col span={4}>
            <img src="http://demo.homecommunity.cn/img/noPhoto.jpg" alt="" style={{ width: "120px", height: "140px" }} />
          </Col>
          <Col span={7}>
            <ul>
              <li>
                <span>业主ID：</span>
                <span>
                  {list.memberId}
                </span>
              </li>
              <li>
                <span>年龄：</span>
                <span>
                  {list.age}
                </span>
              </li>
              <li>
                <span>创建员工：</span>
                <span>
                  {list.userName}
                </span>
              </li>
            </ul>
          </Col>
          <Col span={7}>
            <ul>
              <li>
                <span>名称：</span>
                <span>
                  {list.name}
                </span>
              </li>
              <li>
                <span>身份证：</span>
                <span>
                  {list.idCard}
                </span>
              </li>
              <li>
                <span>备注：</span>
                <span>
                  {list.remark}
                </span>
              </li>
            </ul>
          </Col>
          <Col span={6}>
            <ul>
              <li>
                <span>性别：</span>
                <span>
                  {list.sex == 1 ? "男" : "女"}
                </span>
              </li>
              <li>
                <span>联系方法： </span>
                <span>
                  {list.link}
                </span>
              </li>
            </ul>
          </Col>
        </Row>
      </Card>

      <Button
        type="primary"
        onClick={nextStep}
      >
        下一步
      </Button>&emsp;
      <Button
        type="button"
        onClick={() => {
          props.setCurrent(0);
        }}
      >
        上一步
      </Button>
    </div>
  );
}

export default OwnerInformation;
